import { defineStore } from 'pinia'
import { ref } from 'vue'
import { pop } from '@/utils/clickUtils'
import { ClickEnum } from '@/enum'
import type { BgType } from '@/type'

// 持久化存储
export const useStyleStore = defineStore(
  'style',
  () => {
    const font = ref<any>({
      fontSize: '1rem',
      fontStyle: 'OpenSans',
      fontLightColor: '#000000FF',
      fontDarkColor: '#FCFCFCFF'
    })

    const mouse = ref({
      mouseStyle: 'default',
      mouseClickType: ClickEnum.CHAR,
      isMouseClick: true
    })

    const initBackground = (): BgType => {
      return {
        bgLightColor: '#FFFEF9FF',
        bgDarkColor: '#0F1423FF',
        bgSecondLight: '#FBFBFB',
        bgSecondDark: '#1F2937FF',
        bgThirdLight: '#F4F4F4',
        bgThirdDark: '#374151FF',
        bgType: 'light',
        bgIsAuto: true
      }
    }

    const resetBackground = () => {
      background.value = initBackground()
    }

    const background = ref<BgType>(initBackground())

    const shadow = ref({
      shadowLight: 'rgba(0, 0, 0, 0.2)',
      shadowDark: 'rgba(0, 0, 0, 0.8)',
      shadowSize: 50
    })

    const radius = ref({
      radiusSize: 100
    })

    /* 自动设置主题色 */
    const refreshBgColor = () => {
      const html = document.querySelector('html')
      // 自动切换
      if (background.value.bgIsAuto) {
        const hour = new Date().getHours()
        if (hour >= 6 && hour < 18) {
          background.value.bgType = 'light'
          html?.setAttribute('data-theme', 'light')
        } else {
          background.value.bgType = 'dark'
          html?.setAttribute('data-theme', 'dark')
        }
      } else {
        html?.setAttribute('data-theme', background.value.bgType)
      }
      // 更新背景色
      document.documentElement.style.setProperty('--bg-dark', background.value.bgDarkColor)
      document.documentElement.style.setProperty('--bg-light', background.value.bgLightColor)
      document.documentElement.style.setProperty(
        '--bg-second-light',
        background.value.bgSecondLight
      )
      document.documentElement.style.setProperty('--bg-second-dark', background.value.bgSecondDark)
      document.documentElement.style.setProperty('--bg-third-light', background.value.bgThirdLight)
      document.documentElement.style.setProperty('--bg-third-dark', background.value.bgThirdDark)
    }

    return {
      font,
      mouse,
      background,
      shadow,
      radius,
      refreshBgColor,
      resetBackground
    }
  },
  {
    persist: {
      key: 'style',
      storage: localStorage,
      afterRestore: ({ store }) => {
        /* 监听主题色变化 */
        watch(
          () => store.background,
          () => {
            store.refreshBgColor()
          },
          {
            deep: true
          }
        )
        // 页面点击效果
        let handleClick: (event: MouseEvent) => void
        const handleClickChange = (val: boolean) => {
          if (val) {
            if (!handleClick) {
              handleClick = (e: MouseEvent) => {
                if (e) {
                  pop(e, store.mouse.mouseClickType)
                }
              }
            }
            document.addEventListener('click', handleClick!)
          } else {
            if (handleClick) {
              document.removeEventListener('click', handleClick!)
            }
          }
        }
        /* 监听点击效果 */
        watch(
          () => useStyleStore().mouse,
          (val) => {
            handleClickChange(val.isMouseClick)
          },
          {
            immediate: true,
            deep: true
          }
        )

        watch(
          () => store.radius,
          () => {
            document.documentElement.style.setProperty(
              '--border-radius',
              store.radius.radiusSize / 100 + 'rem'
            )
            document.documentElement.style.setProperty(
              '--border-radius-sm',
              store.radius.radiusSize / 160 + 'rem'
            )
            document.documentElement.style.setProperty(
              '--border-radius-xs',
              store.radius.radiusSize / 360 + 'rem'
            )
          },
          {
            immediate: true,
            deep: true
          }
        )

        watch(
          () => store.shadow,
          () => {
            document.documentElement.style.setProperty(
              '--shadow-size',
              store.shadow.shadowSize / 100 + 'rem'
            )
            document.documentElement.style.setProperty('--shadow-dark', store.shadow.shadowDark)
            document.documentElement.style.setProperty('--shadow-light', store.shadow.shadowLight)
          },
          {
            immediate: true,
            deep: true
          }
        )
      }
    }
  }
)
